<template>
  <div>
    <!-- 单选 -->
    <el-form-item v-if="Radio" label="选项">
      <el-radio-group v-model="checked">
        <el-radio :label="3"> {{ String.fromCharCode(num2 + index -1) }}
          <el-input v-model="checkBoxData.title[index-1]" placeholder="请输入内容" style="width:300px" />
        </el-radio>
      </el-radio-group>

    </el-form-item>
    <!-- 多选 -->
    <el-form-item v-if="checkbox" label="选项">
      <div v-for="(index) in num" :key="index">
        <span>{{ String.fromCharCode(num2 + index -1) }}</span>
        <el-checkbox v-model="checkBoxData.isRight[index-1]">
          <el-input v-model="checkBoxData.title[index-1]" placeholder="请输入内容" style="width:300px" />
        </el-checkbox>
        <el-upload
          class="upimg"
          action="1"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
        >
          上传图片
        </el-upload>
      </div>
      <el-button type="primary" size="default" @click="addFn">点击添加选项</el-button>
    </el-form-item>
  </div>
</template>

<script>
export default {
  name: 'RadioOption',
  data() {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      num: 4,
      num2: 65,
      isRight: [],
      radio: {},
      Radio: true,
      checkbox: false,
      // 单选框
      queryData: {
        title: [],
        isRight: ''
      },
      // 多选框
      checkBoxData: {
        isRight: [],
        title: []
      }
    }
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },

    addFn() {
      this.num++
      // this.num2++
    }

  }

}
</script>

<style lang="scss" scoped>
::v-deep .upimg {
  display: inline-block;
  .el-upload--picture-card{

    height: 40px;
    width: 88px;
    line-height: 40px;
  }
}
</style>
